<template>
  <div style="display: inline-block;margin-left: 5px">
    <el-button :size="size" plain type="danger" icon="el-icon-delete" @click="show=true">清除缓存</el-button>

    <el-dialog :visible.sync="show" title="清除缓存" width="250px"
               modal-append-to-body
               :close-on-click-modal="false"
               :close-on-press-escape="false" center>
      <el-form>
        <el-form-item label="报告期">
          <el-radio-group v-model="currentDataTime">
            <el-radio :label="true">当前</el-radio>
            <el-radio :label="false">全部</el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item label="处理地">
          <el-radio-group v-model="currentArea">
            <el-radio :label="true">当前</el-radio>
            <el-radio :label="false">全部</el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item style="margin-top: 15px">
          <el-button type="danger" icon="el-icon-check" style="width: 200px" @click="submit">确认清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ClearCacheBtn",
  props: {
    keyGenerator: {
      type: Function
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  data() {
    return {
      show: false,
      currentDataTime: true,
      currentArea: true
    }
  },
  methods: {
    submit() {
      let key = this.keyGenerator(this.currentDataTime, this.currentArea);
      request({
        url: '/common/clearCache',
        method: 'post',
        params: {
          pattern: key
        }
      }).then(res => {
        this.$modal.msgShow(res);

        //清除完成事件
        this.$emit('finish');
        this.show = false;
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
